<template>
  <f7-page class="center-body2">
    <!-- 头部 -->
    <f7-nav-title class="header">
      <f7-row class="f7-icon">
        <f7-nav-left>
          <f7-link back icon-material="chevron_left" class="f7-link"></f7-link>
        </f7-nav-left>
        <f7-nav-right>
          <f7-icon f7="ellipsis"></f7-icon>
        </f7-nav-right>
      </f7-row>
      <a href="/setting/profile"><img src="static/img/center/man-png.png" alt="" class="portrait" /></a>
      <f7-block-title class="name">{{ user.userName }}</f7-block-title>
      <f7-block class="introduce">齐明软件</f7-block>
    </f7-nav-title>
    <!-- 中部 -->
      <div class="qm-entry">
         <qm-entry v-for="(item,index) in list" :key="index" :data='item' iconWidth='88' ></qm-entry>
      </div>
    <!-- 底部 -->
    <f7-block class="footer">
      <ul>
        <li>
          <div class="my-name">公司</div>
          <div>齐明软件</div>
        </li>
        <li>
          <div class="my-name">部门</div>
          <div>XX部门</div>
        </li>
        <li>
          <div class="my-name">职务</div>
          <div>{{user.profile.position}}</div>
        </li>
        <li>
          <div class="my-name">手机</div>
          <div>{{ user.profile.mobile }}</div>
        </li>
        <li>
          <div class="my-name">座机</div>
          <div>027-88345649</div>
        </li>
        <li>
          <div class="my-name">邮箱</div>
          <div>{{ user.profile.email }}</div>
        </li>
        <li>
          <div class="my-name">生日</div>
          <div>{{ user.profile.birthday | date }}</div>
        </li>
      </ul>
    </f7-block>
  </f7-page>
</template>

<script>
import controller from "../../../libs/framework/controller";
export default class instance extends controller {
  async getViewModel() {
    let user = await this.$framework.account.getUser();
    this.bind({ user: user });
  }
  mixin() {
    return {
      data() {
        return {
          list: [
            {
              href:'/ui/notice/index4',
              image: "static/img/center/index2/icon_me1.svg",
              title: "发消息",
            },
            {
              image: "static/img/center/index2/icon_me2.svg",
              title: "打电话",
            },
            {
              image: "static/img/center/index2/my-email.svg",
              title: "发邮件",
            },
          ],
        };
      },
    };
  }
}
</script>

<style lang="less" scoped>
.center-body2 {
  height: 100%;
  position: relative;
  background-color: var(--color-fill-grey-inverse);

  .header {
    margin: 0px;
    background: url('../../../../static/img/center/index1/bg_me.png') no-repeat;
    background-size: 100% 100%;
    background-attachment: local;
    width: 100%;
    height: calc(392px * var(--ratio));
    text-align: center;

    .f7-icon {
      display: flex;
      justify-content: space-between;
      padding: calc(26px * var(--ratio)) calc(32px * var(--ratio)) 0px;

      i {
        color: var(--color-fill-grey-inverse);
      }
    }

    .portrait {
      width: calc(120px * var(--ratio));
      height: calc(120px * var(--ratio));
      border-radius: 50%;

    }

    .name {
      --f7-block-title-margin-bottom: 0px;
      margin-top: calc(32px * var(--ratio));
      margin-bottom: calc(9px * var(--ratio));
      font-size: calc(44px * var(--ratio));
      color: var(--color-fill-grey-inverse);
      font-weight: 500;
      line-height: 23px;
    }

    .introduce {
      color: var(--color-fill-grey-inverse);
      font-style: var(--font-size-subcontent);
    }
  }
  .qm-entry{
    margin-top: calc(32px * var(--ratio));
    display: grid;
    grid-template-columns: repeat(3,33%);
    grid-row-gap: 32px;
  }
  .footer {
    ul {
      margin-top: calc(54px * var(--ratio));

      li {
        margin-top: calc(40px * var(--ratio));
        display: flex;
        font-size: var(--font-size-maincontent);
        color: var(--color-text-title);

        .my-name {
          margin-right: calc(52px * var(--ratio));
          color: var(--color-text-subtext);
        }
      }
    }
  }

}

</style>
